<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>buyfunshop</title>
		<meta name="customer-service" />
		<meta name="promotion-tip" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta property="og:type"          content="website" />
		<meta property="og:title"         content="【buyfunshop】" />
		<meta property="og:description"   content="ช้อปปิ้งง่ายมาก! แพลตฟอร์มช้อปปิ้งที่เน้นผู้บริโภคแฟชั่นสตรี สินค้ามีทั้งเสื้อผ้าสตรีแฟชั่น รองเท้าผู้หญิง กระเป๋าสตรี เครื่องประดับ ฯลฯ จัดส่งฟรีเกิน 899/ดำเนินการเองอย่างเป็นทางการ/เก็บเงินปลายทาง/ระยะเวลาชื่นชมเจ็ดวัน " />
		<meta property="og:image"         content="//yinibuy2.oss-cn-hongkong.aliyuncs.com/729419af-b34f-4126-be31-e36aad7582dd.jpg" />
		<meta property="og:url"         content="www.buyfunshop.com" />		
		<link rel="stylesheet" href="../dists/mdui-0.4.3/css/mdui.css" />
		<link rel="stylesheet" href="../dists/swiper/css/swiper.css">
		<link rel="stylesheet" href="../resources/css/common.css"/>
		<style>
			.mdui-head-nav .logo{height:100%}
			.mdui-nav-container{position: fixed; top: 0; right: 0; left: 0; z-index: 3;max-width: 750px; margin: 0px auto;}
			
			.mdui-head-nav{position: fixed; top: 0px; left: 0px; right: 0px; width: 100%; height: 48px; line-height: 48px; text-align: center; background: #FFF; box-sizing: border-box;box-shadow: 0 0px 4px 0px #bbb; max-width: 750px; margin: 0 auto; z-index: 1;padding: 0 10px;display: flex;align-items: center;justify-content: space-between;}
			.mdui-head-nav > span{font-size: 16px; display: flex; align-items: center;letter-spacing: 1px; font-weight: bold;}
			.mdui-head-nav > .mdui-btn-icon{padding: 6px 0;}
			
			.mdui-nav{height: 40px; background: #fff; overflow: hidden; position: relative;padding-top: 48px;}
			.mdui-nav .mdui-tab::-webkit-scrollbar {display: none;}
			.mdui-nav .mdui-tab{width: calc(100% - 50px); float: left;height: 100%;padding-left: 12px;}
			.mdui-nav .mdui-tab a{text-transform: initial; padding: 0 12px; min-width: min-content; min-height: initial; color: #000; opacity: 1; cursor: pointer; margin-right: 6px; font-size: 14px; font-weight: bold;}
			.mdui-nav .mdui-tab a.mdui-tab-active{color: #ff4142;}
			.mdui-tab-indicator{bottom: 4px; height: 4px; background: #ff4142; border-radius: 2px;}
			.mdui-nav .mdui-tab-expand{margin-top: 1px; color: #383838;height: 40px;}
	
			button.mdui-btn-icon{padding: 6px 0;}
			.mdui-nav-select{position:absolute;top:0;right:0;left:0;display:none;box-sizing:border-box;width:100%;background:#fff;z-index: 10;}
			.mdui-nav-select>ul{display:flex;width:100%;flex-flow:row wrap;align-items:center; padding: 0 10px;box-sizing: border-box;}
			.mdui-nav-select .second_nav{padding: 0 10px 12px 10px;}
			.mdui-nav-select .second_nav li{padding: 8px 6px;line-height: 18px;box-sizing: border-box; min-width: 25%;}
			.mdui-nav-select>ul>li>span{color: #FF3D00; font-weight: bold;}
			.mdui-nav-select>ul>li>a{display:inline-block;box-sizing:border-box;padding:8px;width:100%;border-radius:4px; border: 1px solid #e6e6e6; vertical-align:middle;text-align:center;font-size:12px}
			.mdui-nav-select>ul>li>a.activeIndex{color: initial; background: initial; border-color: #FF3D00;}
			
			.mdui-container-fluid{margin-top: 88px !important;}
			.mdui-page-container{position: relative; box-sizing: border-box; padding: 0px; margin: 0px auto;}
			
			.mdui-overlay{z-index: 2 !important;}
			
		</style>
	</head>
	<body class="mdui-bottom-nav-fixed">
		
		<div class="mdui-nav-container">
			<div class="mdui-head-nav">
				<a href="javascript:history.go(-1)" class="mdui-btn mdui-btn-icon mdui-tab-back">
					<svg t="1587028723395" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7397" width="24" height="24"><path d="M641.28 278.613333l-45.226667-45.226666-278.634666 278.762666 278.613333 278.485334 45.248-45.269334-233.365333-233.237333z" p-id="7398"></path></svg>
				</a>
				<span></span>
				<a href="javascript:void(0);" class="mdui-btn mdui-btn-icon" style="opacity: 0"></a>
			</div>
		</div>
		<div class="mdui-container-fluid">
			<div class="mdui-page-container"></div>
		</div>
		<div class="mdui-bottom-nav">
		<a href="list.html" class="mdui-ripple mdui-bottom-nav-active">
			<svg t="1586933266838" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8358" width="48" height="48"><path d="M556.586667 159.36l288.490666 183.914667A64 64 0 0 1 874.666667 397.248v392.746667a64 64 0 0 1-64 64l-224-0.021334V597.333333H448v256.64l-213.333333 0.042667a64 64 0 0 1-64-64V391.68a64 64 0 0 1 30.272-54.4l287.530666-178.346667a64 64 0 0 1 68.138667 0.426667z" p-id="8359" fill="#ff4142"></path></svg>
			<label class="language" language="shou_ye"></label>
		</a>
		<a href="catalog.html" class="mdui-ripple">
			<svg t="1587007028153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7377" width="24" height="24"><path d="M256 734.101333v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666zM256 493.184v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666zM256 252.245333v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666z" p-id="7378" fill="#2A363B"></path></svg>
			<label class="language" language="fen_lei"></label>
		</a>
		<a onclick="customerCart.openCart();" class="mdui-ripple">
			<svg t="1586933455682" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9017" width="48" height="48"><path d="M330.666667 768a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667z m384 0a53.333333 53.333333 0 1 1 0 106.666667 53.333333 53.333333 0 0 1 0-106.666667zM94.762667 160h54.741333a96 96 0 0 1 92.906667 71.786667l1.024 4.394666L256.64 298.666667h0.213333l42.88 205.333333L332.224 661.333333h402.218667l61.653333-298.666666H313.813333l-13.376-64h495.68a64 64 0 0 1 62.677334 76.949333l-61.653334 298.666667A64 64 0 0 1 734.442667 725.333333H332.224a64 64 0 0 1-62.677333-51.050666l-60.586667-293.418667-0.405333 0.085333-27.733334-131.562666a32 32 0 0 0-28.309333-25.237334l-2.986667-0.149333H94.741333v-64h54.741334z" p-id="9018" fill="#2A363B"></path></svg>
			<label class="language" language="gou_wu_che"></label>
		</a>
		<a href="../user/index.html" class="mdui-ripple">
			<svg t="1586934464276" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9180" width="48" height="48"><path d="M644.8 581.568l160.64 187.456A64 64 0 0 1 756.842667 874.666667H267.157333a64 64 0 0 1-48.597333-105.642667l160.661333-187.434667c18.922667 11.52 39.466667 20.629333 61.205334 26.944L267.157333 810.666667H480v-128h64v128h212.842667l-173.269334-202.133334a254.613333 254.613333 0 0 0 61.226667-26.965333zM512 149.333333c117.824 0 213.333333 95.509333 213.333333 213.333334s-95.509333 213.333333-213.333333 213.333333-213.333333-95.509333-213.333333-213.333333S394.176 149.333333 512 149.333333z m0 64a149.333333 149.333333 0 1 0 0 298.666667 149.333333 149.333333 0 0 0 0-298.666667z" p-id="9181" fill="#2A363B"></path></svg>
			<label class="language" language="wo_de"></label>
		</a>
	</div>
	</body>
	<script src="../dists/mdui-0.4.3/js/mdui.js"></script>
	<script src="../dists/swiper/js/swiper.js"></script>
	<script src="../dists/art-template/template-web.js"></script>
	<script src="../resources/js/echo.js"></script>
	<script src="../resources/js/common.js"></script>
	<script>
	  !function(f,b,e,v,n,t,s)
	  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
	  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
	  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
	  n.queue=[];t=b.createElement(e);t.async=!0;
	  t.src=v;s=b.getElementsByTagName(e)[0];
	  s.parentNode.insertBefore(t,s)}(window, document,'script',
	  'https://connect.facebook.net/en_US/fbevents.js');
	  fbq('init', commonConfig.getFbPiexId());
	  fbq('track', 'PageView');
	</script>
	
	<script id="mdui-tab-container" type="text/html">
		<div class="mdui-nav">
			<div class="mdui-tab" id="id-mdui-tab">
			<% for (var i = 0; i < list.length; i++) { %>
				<% if (list[i].isShow) { %>
				<a href="#<%=list[i].id%>" class="mdui-ripple"><%=list[i].name%></a>
				<% } %>
			<% } %>
			</div>
			<button class="mdui-btn mdui-btn-icon mdui-tab-expand"><svg t="1587007028153" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7377" width="24" height="24"><path d="M256 734.101333v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666zM256 493.184v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666zM256 252.245333v64H170.666667v-64h85.333333z m597.333333 0v64H298.666667v-64h554.666666z" p-id="7378" fill="#000000"></path></svg></button>
		</div>
		<div class="mdui-nav-select">
			<ul>
				<li style="font-size: 15px; color: #333; font-weight: 600;width: 50% !important;"><span class="language" language="quan_bu_fen_lei"></span></li>
				<li class="mdui-text-right" style="font-weight: 300; color: #A8A8A8;width: 50% !important;">
					<button class="mdui-btn mdui-btn-icon mdui-tab-close">
						<svg t="1587020841649" class="icon" viewBox="0 0 1045 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6538" width="24" height="24"><path d="M282.517333 213.376l-45.354666 45.162667L489.472 512 237.162667 765.461333l45.354666 45.162667L534.613333 557.354667l252.096 253.269333 45.354667-45.162667-252.288-253.44 252.288-253.482666-45.354667-45.162667L534.613333 466.624l-252.096-253.226667z" p-id="6539" fill="#000000"></path></svg>
					</button>
				</li>
			</ul>
			<ul class="second_nav">
			<% for (var i = 0; i < list.length; i++) { %>
				<% if (list[i].isShow) { %>
				<li><a _id="<%=list[i].id%>" _index="<%=i%>"><%=list[i].name%></a></li>
				<% } %>
			<% } %>
			</ul>
		</div>
	</script>
	<script id="template-module-product-list-horizontal" type="text/html">
		<div class="template-module-product-list-horizontal">
			<div class="flex-row">
				<ul>
				<% for (var i = 0; i < aggregateModuleProducts.length; i += 2) { %>
					<li>
						<a href="details.html?id=<%=aggregateModuleProducts[i].id%>">
							<div class="image"><img  src="../resources/img/placeholder.png" data-echo="<%=aggregateModuleProducts[i].productImageUrl%>" /></div>
							<div class="infos">
								<div class="name"><%=aggregateModuleProducts[i].title%></div>
								<div class="describe"><%=aggregateModuleProducts[i].description%></div>
								<div class="tags">
									<% if(aggregateModuleProducts[i].flag){ %>
										<% for (var j = 0; j < aggregateModuleProducts[i].flag.length; j++) { %>
											<%if(aggregateModuleProducts[i].flag[j] != ''){%>
												<span><%= aggregateModuleProducts[i].flag[j] %></span>
											<%}%>
										<% } %>
									<% } %>
								</div>
								<div class="price">
									<span class="salePrice"><%=aggregateModuleProducts[i].minPrice%></span>
									<span class="originalPrice"><%=aggregateModuleProducts[i].originalPrice%></span>
									<span class="salesVolume">ฝ่ายขาย<%= $imports.buyCount(aggregateModuleProducts[i].id)%></span>
								</div>
							</div>
						</a>
					</li>
				<% } %>
				</ul>
			</div>
			<div class="flex-row">
				<ul>
				<% for (var i = 1; i < aggregateModuleProducts.length; i += 2) { %>
					<li>
						<a href="details.html?id=<%=aggregateModuleProducts[i].id%>">
							<div class="image"><img  src="../resources/img/placeholder.png" data-echo="<%=aggregateModuleProducts[i].productImageUrl%>" /></div>
							<div class="infos">
								<div class="name"><%=aggregateModuleProducts[i].title%></div>
								<div class="describe"><%=aggregateModuleProducts[i].description%></div>
								<div class="tags">
									<% if(aggregateModuleProducts[i].flag){ %>
										<% for (var j = 0; j < aggregateModuleProducts[i].flag.length; j++) { %>
											<%if(aggregateModuleProducts[i].flag[j] != ''){%>
												<span><%= aggregateModuleProducts[i].flag[j] %></span>
											<%}%>
										<% } %>
									<% } %>
								</div>
								<div class="price">
									<span class="salePrice"><%=aggregateModuleProducts[i].minPrice%></span>
									<span class="originalPrice"><%=aggregateModuleProducts[i].originalPrice%></span>
									<span class="salesVolume">ฝ่ายขาย<%= $imports.buyCount(aggregateModuleProducts[i].id)%></span>
								</div>
							</div>
						</a>
					</li>
				<% } %>
				</ul>
			</div>
		</div>
	</script>
	<script>
		$$(function() {
			app.init();
		});
		var app = {
			datas: {
				inst : null,
				navInfo: null ,
				id: tools.getURLParam('_id'),
				subId: tools.getURLParam('_subId')
			},
			methods: {
				goHome : function(){
					window.location.href = "list.html";
				},
				initNavInfo : function(){
					tools.loading();
					if(app.datas.id == null || !app.datas.id) app.methods.goHome();
					
					if(!cacheSessionStorage.getCache('_navInfo')){
						$$.ajax({
							async: false,
							url: commonConfig.websitePrefix() + "/api/shop",
							success: function(data) {
								cacheSessionStorage.setCache('_navInfo' , data.datas);
							},complete: function(){tools.hideLoading();}
						})
					}
					var _navInfo = cacheSessionStorage.getCache('_navInfo');
					$$.each(_navInfo.shopNavs, function(index , shopNav) {
						if(shopNav.id == app.datas.id){
							app.datas.navInfo = shopNav ; 
							return false;
						}
					});
					app.methods.renderNavInfo();
				},
				renderNavInfo : function(){
					var _list = [] ; 
					$$.each(app.datas.navInfo.subs , function(index , value){
					    if(value.isShow)_list.push(value);
					});
					$$('.mdui-nav-container').append(template('mdui-tab-container', {'list': _list}));
					$$('.mdui-head-nav > span').html(app.datas.navInfo.name);
					app.events.mduiNavSelect();
					app.methods.mduiNavCuurentNav();
				},
				
				mduiNavCuurentNav : function(){
					app.datas.inst = new mdui.Tab('.mdui-nav > div.mdui-tab');
					app.events.mduiNavClick();

					// 加载正确的二级导航
					if(app.datas.subId != null && app.datas.subId){
						var _tmpIndex = 0 ; 
						$$.each(app.datas.inst.$tabs , function(i,tab){
						     if(tab.hash.substr(1) == app.datas.subId) {
								_tmpIndex = i;
								return false;
							 }
						})
						if(_tmpIndex != null){
							app.datas.inst.show(_tmpIndex);
							return false;
						}
					}
					// 无选中二级时，默认选中第一个展示的
					$$.each(app.datas.navInfo.subs , function(i,value){
						if(value.isShow){
							app.methods.mduiNavCuurentNavInfo(value);
							return false;
						}
					});
				},
				mduiNavCuurentNavInfo : function(nav){
					$$.ajax({
						url : commonConfig.websitePrefix() + '/api/shop/collections?navId='+ nav.id,
						success: function (data) {
							if(data.datas.length == 0){
								mdui.snackbar({message: language.text('hao_xiang_zou_diu_le'),position: 'top'});
								tools.hideLoading();
								app.datas.inst.show(0);
							}else{
								document.body.scrollTop = 0;
								document.documentElement.scrollTop = 0;
								app.methods.renderMduiNavCuurentNavModules(data.datas);
								echo.init({offset: 667,throttle: 0});
							}
						},complete: function(){tools.hideLoading();}
					});
				},
				//TODO 如果有满减活动,需要再这里呈现
				renderMduiNavCuurentNavModules: function(collectionDatas){
					app.methods.resetModuleContainer();
					_marketing.renderPromotions();
					if(collectionDatas && collectionDatas.length > 0){
						$$.each(collectionDatas , function(index , collection){
							try{
								app.methods.renderModuleInfos(collection);
							}catch(e){console.log(e);}
						});
					}else{
						mdui.snackbar({message: language.text('hao_xiang_zou_diu_le'),position: 'top'});
					}
					tools.hideLoading();
				},
				resetModuleContainer : function(){
					$$('.mdui-page-container').html('');
					$$('script[attr="pageCustom"]').remove();
					tools.removeTemplateCssCode();
				},
				renderModuleInfos : function(collection){
					tools.loadCssCode(collection.present,'pageCustom');
					var guid = $$.guid();
					$$('body').append('<script id="mdui-page-container-'+ guid +'" attr="pageCustom" type="text/html">' + collection.template + '<\/script>');
					var _domHtml = template('mdui-page-container-' + guid , {'collection': collection}) ; 
					$$('.mdui-page-container').append('<div class="pro_box" _index="'+collection.collectionId+'">' + _domHtml + '</div>');
					if(collection.script && collection.script != '')eval(collection.script);
				},
				
				reloactionNav : function(){
					var _offset = $$('.mdui-nav .mdui-tab a.mdui-tab-active').offset();
					var _navWidth = $$('.mdui-nav .mdui-tab').width() ; 
					$$('.mdui-nav .mdui-tab')[0].scrollLeft = $$('.mdui-nav .mdui-tab')[0].scrollLeft + _offset.left - (_navWidth - _offset.width) / 2
				},
			},
			events: {
				mduiNavSelect : function(){
					$$('button.mdui-tab-expand').on('click' , function(e){
						$$.showOverlay(2000);
						$$('.mdui-nav-select').show();
						$$('.mdui-nav-select ul > li > a').removeClass('activeIndex');
						$$('.mdui-nav-select ul > li > a[_id="'+ $$(app.datas.inst.$tabs[app.datas.inst.activeIndex]).attr('href').substr(1) +'"]').addClass('activeIndex');
						
						$$('.mdui-overlay.mdui-overlay-show').off('click').on('click' , function(){
							if($$('.mdui-nav-select').css('display') == "block"){
								$$('.mdui-nav-select').hide();
								$$.hideOverlay();
							}
						});
					});
					
					$$('.mdui-tab-close').on('click' , function(e){
						$$('.mdui-nav-select').hide();
						$$.hideOverlay();
					});
					
					$$('.mdui-nav-select ul > li > a').on('click' , function(e){
						$$('.mdui-nav-select ul > li > a').removeClass('activeIndex');
						$$(this).addClass('activeIndex');
						$$('.mdui-nav-select').hide();
						$$.hideOverlay();
						app.datas.inst.show(parseInt($$(this).attr('_index')));
						
						app.methods.reloactionNav();
					});
				},
				mduiNavClick : function(){
					document.getElementById('id-mdui-tab').addEventListener('change.mdui.tab', function (event) {
						$$.each(app.datas.navInfo.subs , function(i,value){
						    if(value.id == event.detail.id){
								app.methods.mduiNavCuurentNavInfo(value);
								$$('.mdui-nav-select .nav_box ul li a').removeClass('activeIndex')
								$$('.mdui-nav-select .nav_box ul li').eq(i-1).find('a').addClass('activeIndex')
								return false;
							}
						})
					});
				}
			},
			init: function() {
				app.methods.initNavInfo();
			}
		}
	</script>
</html>
